<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            width: 375px;
            height: 600px;
            margin: auto;
            border: 1px solid black;
        }
        .content{
            width: 100%;
            height: 550px;
            position: relative;
        }
        .content>div{
            width: 100%;
            height: 550px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .home{
            background-color: aquamarine;
        }
        .shop{
            background-color: blue;
        }
        .mine{
            background-color: red;
        }
        .hide{
            display: none;
        }

        ul{
            list-style: none;
            display: flex;
            justify-content: space-evenly;
            text-align: center;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="content">
            <div class="home">
                <h1>首页</h1>
            </div>
            <div class="shop hide">
                <h1>购物车</h1>
            </div>
            <div class="mine hide">
                <h1>我的</h1>
            </div>
        </div>
        <ul>
            <li><a href="#/home">首页</a> </li>
            <li><a href="#/shop">购物车</a></li>
            <li><a href="#/mine">我的</a></li>
        </ul>
    </div>

    <script>
        let ul=document.getElementsByTagName("ul")[0];
        let home=document.getElementsByClassName("home")[0];
        let shop=document.getElementsByClassName("shop")[0];
        let mine=document.getElementsByClassName("mine")[0];
        // hashchange:监听hash的改变
        window.onhashchange=function(){
                // 获取当前页面的hash值
                console.log(location.hash);
                let router=location.hash.slice(1);
                if(router=="/home"){
                    home.classList.remove("hide");
                    shop.classList.add("hide");
                    mine.classList.add("hide");
                }else if(router=="/shop"){
                    shop.classList.remove("hide");
                    home.classList.add("hide");
                    mine.classList.add("hide");
                }else{
                    mine.classList.remove("hide");
                    home.classList.add("hide");
                    shop.classList.add("hide");
                }
            
        }
    </script>
    
</body>
</html>